<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_104018') }}
    </PageTitle>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            maxlength="32"
            :placeholder="$t('contact.name')"
            clearable
            @blur="() => (dataForm.name = dataForm.name.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.company"
            maxlength="32"
            :placeholder="$t('contact.company')"
            clearable
            @blur="() => (dataForm.company = dataForm.company.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item v-if="showFormItem('content')">
          <el-input
            v-model="dataForm.content"
            maxlength="32"
            :placeholder="$t('contact.content')"
            clearable
            @blur="() => (dataForm.content = dataForm.content.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.type"
            clearable
            :placeholder="$t('contact.type')"
          >
            <el-option
              v-for="type in typeList"
              :key="type.val"
              :value="type.val"
              :label="type.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showFormItem('role')">
          <el-select
            v-model="dataForm.role"
            clearable
            :placeholder="$t('contact.role')"
          >
            <el-option
              v-for="role in roleList"
              :key="role.val"
              :value="role.val"
              :label="role.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showFormItem('status')">
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('contact.status')"
          >
            <el-option
              v-for="status in statusList"
              :key="status.val"
              :value="status.val"
              :label="status.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showFormItem('remark')">
          <el-input
            v-model="dataForm.remark"
            maxlength="32"
            :placeholder="$t('contact.remark')"
            clearable
            @blur="() => (dataForm.remark = dataForm.remark.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="w-8"
            @click="getDataList((pageNo = 1))"
          >
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="isAuth('104018.MANAGE')"
            type="primary"
            class="w-8"
            @click="createLevelEmail"
          >
            <svg-icon icon-class="Message" class="text-lg" />
          </el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button
            style="border: none"
            type="primary"
            class="w-8"
            size="medium"
          >
            <table-column-filter
              :list="settingList"
              :default-setting="defaultSettings"
              v-model:settings="settings"
              domain="operator.contact"
            />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column prop="name" :label="$t('contact.name')" />
        <el-table-column prop="email" :label="$t('contact.email')" />
        <el-table-column
          prop="company"
          min-width="100"
          :label="$t('contact.company')"
        />
        <!-- <el-table-column
        prop="mobile"
        
        
        min-width="100"
        :label="$t('contact.mobile')">
      </el-table-column> -->
        <el-table-column
          v-if="showHeader('country')"
          key="countryCode"
          prop="countryCode"
          min-width="120"
          :label="$t('contact.country_or_region')"
        />
        <!-- <el-table-column
        prop="utcTime"
        
        
        min-width="100"
        label="UTC Time">
      </el-table-column>
      <el-table-column
        prop="language"
        
        
        min-width="100"
        label="language">
      </el-table-column> -->
        <el-table-column
          v-if="showHeader('content')"
          prop="content"
          key="content"
          min-width="150"
          :label="$t('contact.content')"
        />

        <el-table-column
          prop="type"
          min-width="120"
          :label="$t('contact.type')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.type === 0" size="small" type="warning">{{
              $t('contact.bank_or_acquirer')
            }}</el-tag>
            <el-tag v-if="scope.row.type === 1" size="small">{{
              $t('contact.distributor_or_reseller')
            }}</el-tag>
            <el-tag v-if="scope.row.type === 2" size="small" type="info">{{
              $t('contact.psp')
            }}</el-tag>
            <el-tag v-if="scope.row.type === 3" size="small" type="success">{{
              $t('contact.isv')
            }}</el-tag>
            <el-tag v-if="scope.row.type === 4" size="small" type="danger">{{
              $t('contact.others')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('role')"
          prop="role"
          key="role"
          :label="$t('contact.role')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.role === 0" size="small" type="warning">{{
              $t('contact.manager')
            }}</el-tag>
            <el-tag v-if="scope.row.role === 1" size="small">{{
              $t('contact.marketing')
            }}</el-tag>
            <el-tag v-if="scope.row.role === 2" size="small" type="info">{{
              $t('contact.developer')
            }}</el-tag>
            <el-tag v-if="scope.row.role === 3" size="small" type="danger">{{
              $t('contact.others_role')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('status')"
          prop="status"
          key="status"
          min-width="80"
          :label="$t('contact.status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 1" size="small">{{
              $t('contact.handled')
            }}</el-tag>
            <el-tag v-if="scope.row.status === 0" size="small" type="info">{{
              $t('contact.unhandled')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('createTime')"
          prop="creTime"
          key="creTime"
          min-width="95"
          :label="$t('common.createTime')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('handling_time')"
          key="updTime"
          prop="updTime"
          min-width="95"
          :label="$t('contact.handling_time')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.updTime)">
              {{ dateFilter(scope.row.updTime) }}
              {{ scope.row.updTime ? '' : '-' }}
            </div>
          </template></el-table-column
        >
        <el-table-column
          prop="remark"
          min-width="100"
          :label="$t('contact.remark')"
        />
        <el-table-column width="100px" :label="$t('contact.operation')">
          <template v-slot="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('contact.edit_remark')"
              placement="top"
            >
              <el-button
                style="color: #8c939d"
                type="text"
                @click="manageHandle(scope.row.messageRecordId)"
              >
                <i class="el-icon-info"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column width="75px">
          <template v-slot="scope">
            <div :title="$t('contact.edit_remark')"><el-button @click="manageHandle(scope.row.messageRecordId)" text class="w-8"><svg-icon icon-class="Edit" /></el-button></div>
            <!-- <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="manageHandle(scope.row.messageRecordId)"
                  >
                    <svg-icon icon-class="InfoFilled" />{{
                      $t('contact.edit_remark')
                    }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      v-model="visible"
      :title="$t('contact.edit_remark')"
      width="500px"
      @close="cancel"
    >
      <el-form ref="editForm" :rules="rules" :model="form" label-position="top">
        <el-form-item :label="$t('contact.name')" prop="name">
          <el-input v-model="form.name" disabled show-word-limit clearable />
        </el-form-item>
        <el-form-item :label="$t('contact.content')" prop="content">
          <el-input
            v-model="form.content"
            disabled
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('contact.remark')" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="1024"
            show-word-limit
            clearable
            @blur="() => (form.remark = form.remark.trim())"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="isAuth('104018.MANAGE')" text @click="cancel">{{
            $t('common.cancel')
          }}</el-button>
          <el-button
            v-if="isAuth('104018.MANAGE')"
            type="primary"
            :loading="dataListLoading"
            @click="submit(form)"
            >{{ $t('common.confirm') }}</el-button
          >
        </span>
      </template>
    </el-dialog>
    <message-notice-email v-model="addLevelEmailVisible" ref="addLevelEmail" />
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters/index'
import TableColumnFilter from '@/components/page-setting/table-column-filter'
import { isAuth } from '@/utils'
import { formatDate } from '@/utils/formatDate'
import { getMessageRecords, addRemark } from '@/api/contact'
import MessageNoticeEmail from './components/message-notice-email'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  components: {
    MessageNoticeEmail,
    TableColumnFilter,
    PageTitle
  },
  data() {
    return {
      settings: {
        conditions: [],
        columns: []
      },
      dataForm: {
        name: '',
        company: '',
        content: '',
        remark: ''
      },
      isdisabled: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      visible: false,
      form: {
        name: '',
        content: '',
        remark: '',
        messageRecordId: ''
      },
      addLevelEmailVisible: false
    }
  },
  computed: {
    statusList() {
      return [
        { val: 0, label: this.$t('contact.unhandled') },
        { val: 1, label: this.$t('contact.handled') }
      ]
    },
    typeList() {
      return [
        { val: 0, label: this.$t('contact.bank_or_acquirer') },
        { val: 1, label: this.$t('contact.distributor_or_reseller') },
        { val: 2, label: this.$t('contact.psp') },
        { val: 3, label: this.$t('contact.isv') },
        { val: 4, label: this.$t('contact.others') }
      ]
    },
    roleList() {
      return [
        { val: 0, label: this.$t('contact.manager') },
        { val: 1, label: this.$t('contact.marketing') },
        { val: 2, label: this.$t('contact.developer') },
        { val: 3, label: this.$t('contact.others_role') }
      ]
    },
    rules() {
      return {
        remark: [
          {
            required: true,
            message: this.$t('contact.remark_not_null_tip'),
            trigger: ['blur']
          }
        ]
      }
    },

    settingList() {
      return {
        conditions: [
          {
            title: this.$t('contact.content'),
            code: 'content'
          },
          {
            title: this.$t('contact.role'),
            code: 'role'
          },
          {
            title: this.$t('contact.status'),
            code: 'status'
          },
          {
            title: this.$t('contact.remark'),
            code: 'remark'
          }
        ],

        columns: [
          {
            title: this.$t('contact.country_or_region'),
            code: 'country'
          },
          {
            title: this.$t('contact.content'),
            code: 'content'
          },
          {
            title: this.$t('contact.status'),
            code: 'status'
          },
          {
            title: this.$t('contact.role'),
            code: 'role'
          },
          {
            title: this.$t('common.createTime'),
            code: 'createTime'
          },
          {
            title: this.$t('contact.handling_time'),
            code: 'handling_time'
          }
        ]
      }
    },
    defaultSettings() {
      return {
        conditions: [],
        columns: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    timeFilter,
    dateFilter,
    async init() {
      await this.getDataList()
    },
    showHeader(label) {
      var list = this.settings['columns']
      return list ? list.includes(label) : false
    },
    showFormItem(label) {
      var list = this.settings['conditions']
      return list ? list.includes(label) : false
    },
    getDataList() {
      this.dataListLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        type: this.dataForm.type,
        role: this.dataForm.role,
        name: this.dataForm.name,
        company: this.dataForm.company,
        content: this.dataForm.content,
        remark: this.dataForm.remark
      }
      getMessageRecords(params)
        .then((data) => {
          this.dataList = data.list
          this.rows = data.total
          this.dataListLoading = false
          for (var i = 0; i < data.list.length; i++) {
            if (
              data.list[i].countryCode !== null &&
              data.list[i].countryCode !== ''
            ) {
              this.dataList[i].countryCode = this.$t(
                'country_or_region.' + data.list[i].countryCode
              )
            }
            this.dataList[i].creTime = formatDate(
              data.list[i].creTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
            this.dataList[i].updTime = formatDate(
              data.list[i].updTime,
              'YYYY-MM-DD  HH:mm:ss'
            )
          }
        })
        .catch((e) => {
          this.dataListLoading = false
          this.$confirmError(e)
          // this.$message.error(e.message)
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let value = row[column.property]
      if (value != null) {
        if (column.property === 'creTime') {
          value = formatDate(row[column.property], 'YYYY-MM-DD')
        }
        if (value.length * 13 > column.width) {
          //  console.log(columnIndex + ':' + JSON.stringify(column))
        }
      }
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    manageHandle(messageRecordId) {
      this.visible = true
      const params = {
        messageRecordId: messageRecordId
      }
      getMessageRecords(params)
        .then((data) => {
          this.form.name = data.list[0].name
          this.form.content = data.list[0].content
          this.form.remark = data.list[0].remark
          this.form.messageRecordId = messageRecordId
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    cancel() {
      this.$emit('close')
      this.visible = false
    },
    submit(form) {
      this.$refs['editForm'].validate((valid) => {
        this.isdisabled = true
        if (valid) {
          const params = {
            messageRecordId: form.messageRecordId,
            remark: form.remark
          }
          addRemark(params)
            .then((data) => {
              this.$message.success(this.$t('common.success'))
              this.getDataList()
              this.visible = false
              this.isdisabled = false
            })
            .catch((e) => {
              this.$confirmError(e)
              this.isdisabled = false
            })
        }
      })
    },
    createLevelEmail() {
      this.addLevelEmailVisible = true
      this.$nextTick(() => {
        this.$refs.addLevelEmail.init()
      })
    },
    isAuth
  }
}
</script>
<style lang="scss" scope></style>
